/**
 * WebSocket 客户端类
 * 用于管理与服务器的 WebSocket 连接和消息处理
 */
class WebSocketClient {
  constructor() {
    // WebSocket 实例
    this.ws = null
    // 消息处理器映射表，key 为消息类型，value 为处理函数数组
    this.handlers = new Map()
  }

  /**
   * 建立 WebSocket 连接
   * 并设置相关的事件处理函数
   */
  connect() {
    // 连接到 WebSocket 服务器
    this.ws = new WebSocket('ws://localhost:3000')

    // 处理接收到的消息
    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data)
      // 获取该消息类型的所有处理函数
      const handlers = this.handlers.get(message.type) || []
      // 依次调用所有处理函数
      handlers.forEach(handler => handler(message.data))
    }

    // 处理连接错误
    this.ws.onerror = (error) => {
      console.error('WebSocket error:', error)
      // 3秒后尝试重新连接
      setTimeout(() => {
        this.connect()
      }, 3000)
    }

    // 处理连接关闭
    this.ws.onclose = () => {
      // 3秒后尝试重新连接
      setTimeout(() => {
        this.connect()
      }, 3000)
    }
  }

  /**
   * 注册消息处理函数
   * @param {string} type - 消息类型
   * @param {Function} handler - 处理函数
   */
  on(type, handler) {
    // 如果该类型还没有处理函数数组，则创建一个
    if (!this.handlers.has(type)) {
      this.handlers.set(type, [])
    }
    // 将处理函数添加到数组中
    this.handlers.get(type).push(handler)
  }

  /**
   * 移除消息处理函数
   * @param {string} type - 消息类型
   * @param {Function} handler - 要移除的处理函数
   */
  off(type, handler) {
    const handlers = this.handlers.get(type)
    if (handlers) {
      // 找到处理函数的索引
      const index = handlers.indexOf(handler)
      if (index !== -1) {
        // 从数组中移除该处理函数
        handlers.splice(index, 1)
      }
    }
  }
}


export const wsClient = new WebSocketClient() 